<template>
	<div class="base_edit" v-if="async">
		<div class="conter-bg">
			<div class="conter-img">
				<el-image class="conter-bgimg" ref="img_preview" :src="$ala.urlImage(viewModel.image)" :preview-src-list="srcList"></el-image>
				<vue-draggable-resizable :x="relaArray.x" :y="relaArray.y" :w="relaArray.width" :h="relaArray.width" @dragging="onDrag" @resizing="onResize" :parent="true" v-if="viewModel.qrCodeSetting.image">
					<img style="height: 100%; width: 100%;" :src="$ala.urlImage(viewModel.qrCodeSetting.image)" />
				</vue-draggable-resizable>
			</div>
		</div>
		<el-tabs type="border-card" class="edit-tabsbox">
			<el-tab-pane label="基本信息">
				<div class="conter-bg_right">
					<el-form-item label="二维码背景图" required>
						<div>
							<x-select-image @selectImage="selectImage" v-model="viewModel.image"></x-select-image>
						</div>
						<div class="sale-intro">请上传二维码的背景图片,建议图片尺寸：1080px*1920px。 当前图片尺寸：宽： <x-code>{{viewModel.width}}px</x-code>高：<x-code>{{viewModel.height}}px</x-code>
							否则会导致比例不对称，二维码位置不能正常生成
						</div>
					</el-form-item>
					<el-form-item label="二维码名称" required>
						<el-input v-model="viewModel.name" maxlength="20" placeholder="请输入二维码名称"></el-input>
						<el-input v-model="viewModel.id" type="hidden" style="display:none"></el-input>
						<div class="sale-intro">请输入二维码名称，不能为空30个字以内</div>
					</el-form-item>
					<!-- <el-form-item label="站点" required>
						<el-select popper-class="select-popper"  v-model="viewModel.site" class="x-select" placeholder="请选择" :size="size" >
							<el-option v-for="item in site" :key="item.key" :value="item.value" :label="item.name"></el-option>
						</el-select>
						<div class="sale-intro">请选择站点</div>
					</el-form-item> -->
					<el-form-item label="二维码分类" required>
						<x-select v-model="viewModel.classId" type="QrCodeClassRelation"></x-select>
						<div class="sale-intro">请选择二维码分类</div>
					</el-form-item>
					<el-form-item label="二维码大小">
						<el-input-number v-model="viewModel.qrCodeSetting.width" :disabled="true" :min="0"></el-input-number>
						<div class="sale-intro">请输入二维码大小</div>
					</el-form-item>
					<el-form-item label="二维码位置">
						<div class="qrcode-ipt">
							<div class="qrcode-ipt_list">
								<div class="qrcode-ipt-tx">X轴</div>
								<el-input-number v-model="viewModel.qrCodeSetting.x" :disabled="true" :min="0"></el-input-number>
							</div>
							<div class="qrcode-ipt_list">
								<div class="qrcode-ipt-tx">Y轴</div>
								<el-input-number v-model="viewModel.qrCodeSetting.y" :disabled="true" :min="0"></el-input-number>
							</div>
						</div>
						<div class="sale-intro">请输入二维码位置</div>
					</el-form-item>
				</div>
			</el-tab-pane>
			<el-tab-pane label="高级选项">
				<div class="conter-bg_right">
					<el-form-item label="缩略图">
						<div>
							<x-select-image @selectImage="displayChang" v-model="viewModel.displayImage"></x-select-image>
						</div>
						<div class="sale-intro">请上传二维码的背景图片,建议图片尺寸：1080px*1920px。 当前图片尺寸：宽： <x-code>{{viewModel.width}}px</x-code>高：<x-code>{{viewModel.height}}px</x-code>
							否则会导致比例不对称，二维码位置不能正常生成
						</div>
					</el-form-item>
					<el-form-item label="二维码网址">
						<el-input v-model="viewModel.qrCodeSetting.url" placeholder="请输入二维码网址"></el-input>
						<div class="sale-intro">会员注册网址：/views/user/reg<br />商品网址格式：/views/product/show?id=180 其中180个商品Id，请手动修改</div>
					</el-form-item>
					<el-form-item label=" ">
						<div>
							<x-line title="分享奖励" icon="flaticon-layers">
								<div slot="headerRight">
									<el-button type="primary" @click="shareAdd" size="mini">新增数据</el-button>
								</div>
							</x-line>
							<el-table style="width: 100%" :data="viewModel.shareAssets">
								<el-table-column label="资产类别" header-align="center" align="center">
									<template slot-scope="scope" align="center">
										<x-select v-model="scope.row.moneyTypeId" size="mini" apiUrl="Api/Type/GetKeyValue?type=MoneyTypeConfig"></x-select>
									</template>
								</el-table-column>
								<el-table-column label="金额" header-align="center" align="center">
									<template slot-scope="scope" align="center">
										<el-input-number v-model="scope.row.amount" :min="0" size="mini"></el-input-number>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="120">
									<template slot-scope="scope">
										<el-button @click.native.prevent="deleteRow(scope.$index)" type="danger" size="mini">
											移除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-form-item>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script>
	import ala from 'ala'
	export default {
		model: {
			prop: 'dataModel',
			event: 'change'
		},
		props: {
			dataModel: {}
		},
		data() {
			return {
				viewModel: null,
				relaArray: {
					width: 100,
					x: 0,
					y: 0
				},
				site:[],
				ration: 2.16,
				async: false,
				srcList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.viewModel = this.dataModel
				if (this.$route.query.Id === undefined || this.viewModel.shareAssets === undefined) {
					this.viewModel.shareAssets = []
				}
				this.site = await ala.httpGet('Api/UserQrCode/Sites')
				this.selectImage(this.viewModel.image)
			},
			onDrag(...data) {
				this.relaArray.x = data[0]
				this.relaArray.y = data[1]
				this.viewModel.qrCodeSetting.x = Math.round((data[0]))
				this.viewModel.qrCodeSetting.y = Math.round((data[1]))
			},
			onResize(...data) {
				this.relaArray.width = data[2]
				this.relaArray.height = this.relaArray.width
				this.viewModel.qrCodeSetting.width = data[2]
				this.viewModel.qrCodeSetting.height = this.viewModel.qrCodeSetting.width
			},
			async selectImage(url) {
				this.async = false
				var imgUrl = ala.urlImage(url)
				var img = new Image()
				img.src = imgUrl
				if (img.complete) {
					this.viewModel.width = img.width
					this.viewModel.height = img.height
					this.viewModel.image = url
					this.ration = this.viewModel.width / 375
				}
				if (this.viewModel.width > 1200) {
					ala.error('图片宽度不能大于1200px')
					this.async = true
					return
				}
				if (this.viewModel.height > 8000) {
					ala.error('图片高度不能大于8000px')
					this.async = true
					return
				}

				this.relaArray.width = this.viewModel.qrCodeSetting.width
				if (this.relaArray.width < 50) {
					this.relaArray.width = 50
				}
				if (this.viewModel.qrCodeSetting.x > 375) {
					this.viewModel.qrCodeSetting.x = 10
				}
				if (this.viewModel.qrCodeSetting.y > 1000) {
					this.viewModel.qrCodeSetting.y = 10
				}
				this.relaArray.x = Math.round(this.viewModel.qrCodeSetting.x)
				this.relaArray.y = Math.round(this.viewModel.qrCodeSetting.y)
				this.relaArray.height = this.relaArray.width
				this.$nextTick(() => {
					this.async = true
				})
			},
			async basePreview() {
				this.srcList = []
				var pResones = await this.$ala.httpGet('Api/QrCode/Create', {
					id: this.viewModel.id
				})
				if (pResones) {
					this.srcList.push(this.$ala.urlImage(pResones))
					this.$refs.img_preview.showViewer = true
				}
			},
			displayChang(dUrl) {
				this.viewModel.displayImage = ala.urlImage(dUrl)
			},
			shareAdd() {
				var paraList = {
					moneyTypeId: '',
					radio: 0
				}
				this.viewModel.shareAssets.push(paraList)
			},
			deleteRow(vData, vIndex) {
				this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					this.viewModel.shareAssets.splice(vIndex, 1)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', this.viewModel)
				}
			}
		}
	}
</script>
<style lang="scss">
	@import "./base_edit.scss";
</style>